<template>
  <div id="app"></div>
</template>
              
    <script>
import * as PIXI from "pixi.js";
// import {OutlineFilter} from 'pixi-filter.js';
export default {
  setup() {
    let app = new PIXI.Application({
      width: window.innerWidth,
      height: window.innerHeight,
      backgroundColor: "#fed6e3",
      resolution: window.devicePixelRatio || 1,
    });

    //   搞个容器
    let container = new PIXI.Container();

    // 搞个背景图片
    let sprite = PIXI.Sprite.from(require("./assets/imgs/28.jpg"));
    sprite.width = app.screen.width;
    sprite.height = app.screen.height;
    sprite.x = 0;
    sprite.y = 0;

    //   搞个文字
    let text = new PIXI.Text("Canvas&PIXI.js", {
      fontFamily: "Arial",
      fontSize: 140,
      fill: 0xffffff,
      align: "center",
      dropShadow: true,
      dropShadowColor: "#000000",
      dropShadowBlur: 4,
    });
    text.anchor.set(0.5);
    text.x = app.screen.width / 2;
    text.y = app.screen.height / 2;

    //   搞个置换滤镜
    let sprite2 = PIXI.Sprite.from(require("./assets/imgs/bg.png"));
    sprite2.width = 200;
    sprite2.height = 200;
    let displaceFilter = new PIXI.DisplacementFilter(sprite2);

    container.filters = [displaceFilter];

    container.interactive = true;

    container.addChild(sprite);
    container.addChild(text);
    container.addChild(sprite2);
    app.stage.addChild(container);
    document.body.appendChild(app.view);

    app.ticker.add(() => {
      if (sprite2.y > app.screen.height) {
        sprite2.y = 0;
      }
      sprite2.y += 2;
    });
  },
};
</script>
              
        <style>
canvas {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
</style>
              